<template>
	<view class="box bg-white">
		<view class="padding-l-r-30 evaluate-list">
		    <view v-if="evaluateList && evaluateList.length">
		        <view v-for="(item ,index) in evaluateList " class="evaluate-list-box" :key="index">
		            <view v-show="index < 2">
		                <view class="evaluate-details">
		                    <view class="align-items-center">
		                        <view class="img-box">
		                            <image :src=" item.user.avatar " mode="aspectFill"></image>
		                        </view>
		                        <text class="fs-28 color-0">{{item.user.nickname}}</text>
		                    </view>
		                    <view class="color-4d fs-28 margin-t-20">{{item.content}}</view>
							<view v-if="item.images && item.images.length">
								<u-album :urls=" item.images"></u-album>
							</view>
		                </view>
		                <view class="line" v-if="evaluateList && evaluateList.length > 1 && index < 1"></view>
		            </view>
		        </view>
		    </view>
		   <view v-else class="flex-box flex-column align-items-center padding-t-b-30">
		       <image style="width: 300rpx;height: 300rpx" mode="aspectFill" src=""></image>
		       <text class="fs-26 color-70">暂无评论</text>
		   </view>
		</view>
	</view>
</template>

<script>
import { getShopEvaluate} from 'api/home'
	export default {
		data() {
			return {
				id:'',
				evaluateList:[],
				page:1
			}
		},
		onLoad(e) {
			this.id = e.id
			this.init()
		},
		//上拉加载函数
		onReachBottom() {
		    if (this.isMore) {
		        setTimeout(() => {
		            this.getList()
		        }, 100)
		    } else {
		        uni.showToast({
		            title: '暂无更多',
		            icon: 'none'
		        })
		    }
		
		},
		onPullDownRefresh() {
		    //刷新初始化数据
		    this.init()
		    //关闭刷新动画
		    setTimeout(function() {
		        uni.stopPullDownRefresh()
		    }, 1000)
		},
		methods: {
			init(){
				this.page=1
				this.evaluateList =[]
				this.getList()
			},
			// 评价
			getList(){
			    let params = {
			        goods_id:this.id,
			        limit:10,
			        page:this.page
			    }
			    getShopEvaluate(params).then(res=>{
					if(res.code ==1){
						
						this.evaluateList=this.evaluateList.concat(res.data) 
						if (res.data && res.data.length > 9) {
						    this.isMore = true
						    this.page++
						} else {
						    this.isMore = false
						}
					}
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
.evaluate-list {
    padding-top: 10rpx;
    .evaluate-list-box {
        &:last-child {
            .line {
                display: none;
            }
        }
    }
}
.evaluate-details {
    padding: 20rpx 0;
    .img-box {
        width: 50rpx;
        height: 50rpx;
        min-width: 50rpx;
        margin-right: 16rpx;
        border-radius: 50%;
        overflow: hidden;
        image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
